<template>
  <div class="mainBox flex flex_column">
    <!-- 搜索     -->
    <div class="btnCon flex flex_between">
      <div class="plop flex">
        <el-select
                        filterable v-model="search.warehouseCode" placeholder="请选择仓库" size="mini" @change="getDataLists">
          <el-option
            v-for="item in warhouseList"
            :key="item.warehouseID"
            :label="item.warehouseName"
            :value="item.warehouseCode"
          />
        </el-select>
        <div class="ml15">
          <el-radio-group v-model="tableCode" size="mini" @change="typeChange">
            <el-radio-button label="stockGoodsTatolList">物料</el-radio-button>
            <el-radio-button label="semiFinishedProducts">半成品</el-radio-button>
            <el-radio-button label="FinishedProducts">成品</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <!--      搜索框-->
      <div class="search">
        <el-input
          v-model="search.likeWords"
          placeholder="输入关键字"
          size="small"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getAllDatas"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!--    高级搜索版块-->
    <div class="seniorSearch flex flex_end">
      <div class="flex">
        <!--          <div class="c_3F61F1">高级搜索</div>-->
        <!--          <span class="line"/>-->
        <div class="pointer" @click="Refresh"><i class="el-icon-refresh-right" /></div>
        <span class="line" />
        <!--        表头设置-->
        <div class="setting flex">
          <HeadSeting :list-data.sync="tableHead" :table-code="tableCode" @reset="getTableHead" />
        </div>
      </div>
    </div>
    <!--table板块-->
    <div ref="tableCon" class="tableCon expandBox">
      <el-table
        v-show="tableHead.length>0"
        id="emtable"
        ref="multipleTable"
        v-loading="searchLoading"
        :data="dataLists"
        :height="tableHeight || 'auto'"
        border
        fit
        style="width: 100%"
        @header-dragend="surverWidth"
      >
        <!-- 复选框       -->
        <!--        <el-table-column type="selection" width="40" fixed="left" />-->
        <template v-for="(fruit,index) in tableHead">
          <template v-if="fruit.columnCode==='stockQuantity'">
            <el-table-column
              v-if="fruit.visible"
              :key="index"
              :label="fruit.columnName"
              :min-width="fruit.columnWidth || 120"
              :prop="fruit.columnCode"
              show-overflow-tooltip
              :fixed="fruit.isFloat?'left':false"
            >
              <template slot-scope="{row}">
                <template v-if="row.inoutType===1">
                  <div class="c_e15c45">{{ '-'+row[fruit.columnCode]}}</div>
                </template>
                <template v-if="row.inoutType===2">
                  <div class="c_54a55b">{{ '+'+row[fruit.columnCode]}}</div>
                </template>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              v-if="fruit.visible"
              :key="index"
              :label="fruit.columnName"
              :min-width="fruit.columnWidth || 120"
              :prop="fruit.columnCode"
              show-overflow-tooltip
              :fixed="fruit.isFloat?'left':false"
            >
              <template slot-scope="scope">
                {{ scope.row[fruit.columnCode] }}
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
      <!-- 骨架屏     -->
      <div v-if="tableHead.length==0" class="p16">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!--    分页-->
    <div class="paginaCon">
      <pagination
        :total="total||0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getAllDatas"
      />
    </div>
  </div>
</template>
<script>
import { arraySort } from '@/utils'
import Pagination from '@/components/Pagination'
import HeadSeting from '@/components/HeadSeting'
export default {
  name: 'StockInfo',
  components: { Pagination, HeadSeting },
  data() {
    return {
      tableCode: 'stockGoodsTatolList',
      tableHeight: null, // 表格最大高度
      searchLoading: false,
      search: {
        likeWords: '',
        pageIndex: 1,
        pageSize: 30,
        warehouseCode: ''
      }, // 库存明细
      total: 0,
      tableHead: [], // 表头
      warhouseList: [], // 仓库下拉列表数据
      dataLists: [] // 表格数据列表
    }
  },
  created() {
    // 获取仓库下拉列表
    this.getWarehouseList()
    // 列表表格头部
    this.getTableHead()
  },
  mounted() {
    // 初始化表格高度
    this.calHeight()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout()
    })
  },
  methods: {
    // 获取仓库下拉列表
    getWarehouseList() {
      this.$api.warehouse.getWarehouseList().then(res => {
        this.warhouseList = res
        this.search.warehouseCode = res[0].warehouseCode
        // 明细列表
        this.getDataLists()
      })
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    // 全部入库列表，清除所有查询条件
    Refresh() {
      this.tableCode = 'stockGoodsTatolList'
      this.search = this.$options.data().search
      // 物料列表
      this.getDataLists()
    },
    // 采获取物料、成品、半成品、表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.tableCode
      }
      this.$api.common.getAllTableHead(parmas).then(res => {
        res.sort(arraySort('columnSort'))
        this.tableHead = res
      })
    },
    // 表格类型切换
    typeChange(val) {
      this.tableCode = val
      this.getTableHead()
      this.getAllDatas()
    },
    // 获取所有列表
    getAllDatas() {
      if (this.tableCode === 'stockGoodsTatolList') {
        // 物料明细列表
        this.getDataLists()
      }
    },
    // 物料明细列表
    getDataLists() {
      const parmas = this.search
      this.searchLoading = true
      this.$api.warehouse.GetStockGoodsView(parmas).then(res => {
        this.dataLists = res.list
        this.total = res.totalCount
        this.searchLoading = false
      }).catch(() => {
        this.searchLoading = false
      })
    },
    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {
        })
      }, 300)
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead]
        heads.forEach(item => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width
            return
          }
        })
        this.saveHead(heads)
      }, 100)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
